<template>
  <div class="zh-topnewbar-main">
    <div class="zh-topnewbar-main-title">评分结果:</div>
    <el-tooltip :disabled="nowselctbarindex !==0" :content="nowbarcontent + '分'" effect="light" placement="bottom" :value="true" :manual="true">
      <div class="zh-topnewbar-main-item" :class="nowselctbarindex===0?'zh-topnewbar-main-item-select':''">A级（800分以上）</div>
    </el-tooltip>
    <el-tooltip :disabled="nowselctbarindex!==1" :content="nowbarcontent + '分'" effect="light" placement="bottom" :value="true" :manual="true">
      <div class="zh-topnewbar-main-item" :class="nowselctbarindex===1?'zh-topnewbar-main-item-select':''">B级（700分-800分）</div>
    </el-tooltip>
    <el-tooltip :disabled="nowselctbarindex!==2" :content="nowbarcontent + '分'" effect="light" placement="bottom" :value="true" :manual="true">
      <div class="zh-topnewbar-main-item" :class="nowselctbarindex===2?'zh-topnewbar-main-item-select':''">C级（600分-700分）</div>
    </el-tooltip>
    <el-tooltip :disabled="nowselctbarindex!==3" :content="nowbarcontent + '分'" effect="light" placement="bottom" :value="true" :manual="true">
      <div class="zh-topnewbar-main-item" :class="nowselctbarindex===3?'zh-topnewbar-main-item-select':''">D级（500分-600分）</div>
    </el-tooltip>
    <el-tooltip :disabled="nowselctbarindex!==4" :content="nowbarcontent + '分'" effect="light" placement="bottom" :value="true" :manual="true">
      <div class="zh-topnewbar-main-item" :class="nowselctbarindex===4?'zh-topnewbar-main-item-select':''">E级（500分以下）</div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    nowbarcontent: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data() {
    return {
      nowselctbarindex: 4
    }
  },
  watch: {
    nowbarcontent: {
      handler (newData) {
        if (newData >= 800) {
          this.nowselctbarindex = 0
        } else if (newData >= 700 && newData < 800) {
          this.nowselctbarindex = 1
        } else if (newData >= 600 && newData < 700) {
          this.nowselctbarindex = 2
        } else if (newData >= 500 && newData < 600) {
          this.nowselctbarindex = 3
        } else {
          this.nowselctbarindex = 4
        }
      },
      // 立即监听
      immediate: true,
      // 深度监听
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.zh-topnewbar-main{
    margin-left: 1%;
    width: 98%;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    font-size: 20px;
    .zh-topnewbar-main-title{
        width: 100px;
        color: #fffafa;
    }
    .zh-topnewbar-main-item{
        width: 200px;
        text-align: center;
        font-size: 18px;
        white-space: nowrap;
    }
    .zh-topnewbar-main-item-select{
        border: snow 2px solid;
        font-weight: 600;
    }
    :nth-child(2){
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;
        border-start-start-radius: 9px;
        // border-top-le-radius: 9px;
        background-color: #43cf7c;
    }
    :nth-child(3){
        background-color: #00c2f3;
    }
    :nth-child(4){
        background-color: #ffc300;
    }
    :nth-child(5){
        background-color: #ff5733;
    }
    :nth-child(6){
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
        background-color: #a6a6a6;
    }
}
::v-deep .el-tooltip__popper.is-light{
    background-color: springgreen !important;
    border: springgreen 2px solid !important;
}
</style>
